<template>
  <m-card>
    <view class="process">
      <template v-if="options.length > 0">
        <view class="process-item" v-for="(item, index) in options" :key="index">
          <view class="tools flex column align-center">
            <view class="tools-dot"></view>
            <view class="tools-line" v-if="index !== options.length - 1"></view>
          </view>

          <!--  -->
          <view class="content font28 c333">
            <view class="c481 font32">{{ item.tsi_time_range }}</view>
            <view class="mgt20">主题：{{ item.tsi_theme || '' }}</view>
            <view class="mgt20">
              <view v-if="item.tsi_speaker_names">
                <view>演讲嘉宾：</view>
                <view v-for="(text, i) in item.tsi_speaker_names" :key="i">{{ text }}</view>
              </view>
              <view v-if="item.tsi_desc">{{ item.tsi_desc }}</view>
              <!-- <view>演讲嘉宾： 罗锋盈 中央网信办网络安全协调局副局长； 张光明 工业和信息化部网络安全管理局副局长； 陈之常 江苏省南京市委副书记、市长； 田溯宁 亚信联合创始人</view> -->
            </view>
          </view>
        </view>
      </template>
      <view v-else style="padding: 40rpx 0">
        <m-empty></m-empty>
      </view>
    </view>
  </m-card>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.process {
  margin: 20rpx 0;

  &-item {
    padding-left: 36rpx;
    padding-bottom: 40rpx;
    position: relative;

    &:last-child {
      padding-bottom: 0;
    }

    .tools {
      position: absolute;
      top: 16rpx;
      left: 0;
      height: 100%;

      &-dot {
        width: 16rpx;
        height: 16rpx;
        border: 4rpx solid #ff661f;
        border-radius: 50%;
        flex-shrink: 0;
      }

      &-line {
        width: 0;
        flex: 1;
        border-left: 2rpx dashed #bbbbbb;
      }
    }
  }
}
</style>
